<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件基础</title>
    <style>
        .e-button {
            width: 70px;
            height: 50px;
            user-select: none;
            cursor: default;
            background-color: bisque;
            display: block;
            border-radius: 10%;
            text-align: center;
            line-height: 50px;
            margin: 0 auto;
        }

        .e-success {
            background-color: aqua;
        }

        .e-error {
            background-color: pink;
        }
        .e-round{
            border-radius: 42%;
        }
        .my-add{
            width: 50px;
            height: 50px;
            user-select: none;
            cursor: default;
            background-color: blueviolet;
            margin: 0 auto;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <e-button :set="true"></e-button>
        <e-button :str="'error'"></e-button>
        <e-button :round="true"></e-button>
        <my-add :n1="n"></my-add>
        <button @click="n++">add</button>
        <div>{{n}}</div>

    </div>
    <script src="./vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        const app = createApp({
            data(){
                return{
                    n:10
                }
            }
        });
        app.component("e-button", {
            template: `<div :class="['e-button',{'e-success':set,'e-error':str==='error','e-round':round}]" @click="add">按钮{{num}}</div>`,
            props: {
                set: Boolean,
                str: String,
                round:{
                    type:Boolean,
                    // required:true,
                    // default:true
                }
            },
            data() {
                return {
                    num: 0
                }
            },
            methods: {
                add() {
                    this.num++;
                }
            },
            mounted() {
                console.log("组件渲染成功")
            },

        })
        app.component('my-add',{
            template: `<div class="my-add" @click="n1++">{{n1}}</div>`,
            props:{n1:Number}
        })
        app.mount('#app');
    </script>
</body>

</html>